<script setup lang="ts">
import {Task, TaskResponse, TaskRecordResponse} from "@/views/platform/platformType";
import {onMounted, Ref, ref} from "vue";
import {toBeHandledTasks, toBeReportedTasks} from "@/api/platform";
import moment from 'moment';
import {useRouter} from "vue-router";

const router = useRouter();
const props = defineProps({
  title: String
})
let tasks: Ref<Task[]> = ref([])
const totalCount:Ref<number> = ref(0)

function goToTaskPage(){
  router.push('/taskpreview')
}

let responseData: TaskResponse;
onMounted(async () => {
  switch (props.title){
    case '任务待办':
      const responseA = await toBeHandledTasks({
        taskName: '',
        targetName: '',
        taskType: '',
        sendTarget: '1002001',
        orderBy: 'desc',
        page: 1,
        size: 10
      });
      responseData = responseA.data;
      break;
    case '上报待办':
      let responseB = await toBeReportedTasks();
      responseData = responseB.data;
      break;
    default:
      break;
  }
  totalCount.value = responseData.total;
  tasks.value = responseData.records.map((item:TaskRecordResponse):Task => {
    const momentObject = moment(item.startHandleTime);
    return {
      id: item.taskId,
      organization: item.createOrgName,
      title: item.taskName,
      dateTime: momentObject.format('YYYY-MM-DD HH:mm:ss'),
      time: momentObject.format('hh:mm A'),
      date: momentObject.format('MM-DD'),
    }
  })
});
</script>

<template>
<div class="component-wrap">
  <div class="component-title">
    <div class="title-text">{{ title }}</div>
    <van-tag type="primary" color="#4b6fd6" text-color="#ffffff" size="medium">{{ totalCount }}</van-tag>
  </div>
  <div class="list">
    <div v-for="(task,index) in tasks" :key="task.id" class="list-item">
      <div class="date-time">
        <div class="time">{{ task.time }}</div>
        <div class="date">{{ task.date }}</div>
      </div>
      <div class="right">
        <div class="right-content">
          <div class="item-title">{{ task.title }}</div>
          <div class="organization">单位：{{ task.organization }}</div>
        </div>
        <div v-if="index < tasks.length - 1" class="divider"></div>
      </div>
    </div>
    <van-button type="primary" color="#f1f3fe" block @click="goToTaskPage">
      查看更多
      <van-icon name="play" />
    </van-button>
  </div>
</div>
</template>

<script lang="ts">
export default {
  name: "toBeHandledTask"
}
</script>

<style scoped lang="scss">
.component-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  .title-text{
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    &:before{
      content: '';
      display: block;
      width: 0.3rem;
      height: 1.2rem;
      background-color: #4b6fd6;
      margin-right: 0.3rem;
    }
  }
}

.list{
  background-color: #FFFFFF;
  padding: 0.5rem;
}

.list-item{
  margin-bottom: 1rem;
  display: flex;
}

.date-time{
  margin-right: 0.5rem;
  font-size: 0.8rem;
  width: 5.5rem;
  text-align: right;
  color: #9c9c9c;
  flex-grow: 0;
  padding-top: 0.5rem;
  .time{
    margin-bottom: 0.2rem;
  }
}

.right{
  flex-grow: 1;
}

.right-content{
  padding: 0.5rem;
  background-color: #f7f7f7;
}

.item-title{
  font-weight: bold;
  margin-bottom: 0.5rem;
  line-height: 1.3rem;
}
.organization{
  color: #747474;
  font-size: 0.8rem;
}

.divider{
  width: 100%;
  height: 1px;
  background-color: #f2f2f2;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  &:before{
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #4568d5;
    border: 1px solid #4568d5;
    border-radius: 50%;
  }
}

:deep(.van-button__text){
    color: #4b6ed6;
}
</style>